<template>
  <div class="listTemplateContent">
    <div class="listTemplate" :class="{ hasLeft: tree || slotTree, child }">
      <!-- 自定义树 -->
      <div v-if="slotTree" class="left_path">
        <slot name="slotTree" />
      </div>
      <!--右边表格-->
      <div ref="flexColumn" class="flex-column">
        <div v-if="$slots.top" ref="topRef" class="top">
          <slot name="top" />
        </div>
        <div v-if="$slots.filter" ref="filterRef" class="filter">
          <slot name="filter" />
        </div>
        <div v-if="$slots.action" ref="actionsRef" class="actions">
          <slot name="action" />
        </div>
        <div ref="ContentBox" class="content">
          <div v-if="$slots.table" ref="table" class="table-wrapper">
            <slot name="table" :height="tableHeight" />
          </div>
        </div>
        <div v-if="$slots.pagination" ref="pagination" class="pagination">
          <slot name="pagination" />
        </div>
      </div>
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, computed, onMounted, onUnmounted } from "vue";
// 定义Props
const props = defineProps({
  tree: {
    type: Boolean,
    default: false
  },
  slotTree: {
    type: Boolean,
    default: false
  },

  child: {
    type: Boolean,
    default: false
  }
});

// 定义响应式数据
const tableHeight = ref<number>(0);
const contentHeight = ref<number>(0);

const flexColumn = ref<any>(null);
const topRef = ref<any>(null);
const filterRef = ref<any>(null);
const actionsRef = ref<any>(null);
const table = ref<any>(null);
const pagination = ref<any>(null);

// 计算表格可用高度
function calculateTableHeight() {
  setTimeout(() => {
    if (!flexColumn.value || !table.value) return;

    // 获取 flexColumn 的实际高度
    const flexColumnHeight = flexColumn.value.clientHeight;

    // 获取各个部分的高度（包括 margin-bottom: 10px）
    const topHeight = topRef.value?.offsetHeight || 0;
    const filterHeight = filterRef.value?.offsetHeight || 0;
    const actionsHeight = actionsRef.value?.offsetHeight || 0;
    const paginationHeight = pagination.value?.offsetHeight || 0;

    // 计算表格可用高度：总高度 - 其他部分高度 - 间距
    // 每个元素底部有 10px margin-bottom，content 上下各有 16px padding
    const extraSpace = 52; // 估算的额外空间
    contentHeight.value =
      flexColumnHeight -
      topHeight -
      filterHeight -
      actionsHeight -
      paginationHeight -
      extraSpace;

    // 确保高度不为负
    if (contentHeight.value < 100) {
      contentHeight.value = 100;
    }

    // 更新表格高度
    getTableHeight();
  }, 200);
}

// 设置表格高度
function getTableHeight() {
  setTimeout(() => {
    if (!table.value) return;

    const tableContent = table.value.querySelector(".el-table");
    if (tableContent && contentHeight.value > 0) {
      // 减去一些内边距
      const calculatedHeight = contentHeight.value - 32;
      (tableContent as HTMLElement).style.height = calculatedHeight + "px";
    }
  }, 200);
}

const handleResize = () => {
  calculateTableHeight();
};

// 生命周期钩子
onMounted(() => {
  calculateTableHeight();
  window.addEventListener("resize", handleResize);
});
onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});
// 方法
// function getTableHeight() {
//   setTimeout(() => {
//     tableHeight.value =
//       table.value.clientHeight - 124 + (props.noPagination ? 58 : 0);

//     console.log(tableHeight.value, "--------");
//   }, 0);
// }
</script>

<style lang="scss">
.listTemplateContent {
  box-sizing: border-box;
  padding: 10px;
}
.listTemplate {
  width: 100%;
  height: calc(100vh - 108px);
  display: flex;
  overflow: hidden;
  // background: rgba(85, 85, 235, 0.474);

  .top {
    background: #ffffff;
    padding: 16px;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .filter {
    display: flex;
    flex-wrap: wrap;
    background: #ffffff;
    padding: 16px;
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
    .input {
      width: 200px;
    }
    .el-form {
      width: 100%;
    }
    > .search {
      width: 100%;
    }
  }
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 10px;
    flex-shrink: 0;
  }
  .content {
    padding: 16px;
    flex: 1;
    background: #ffffff;
    overflow: hidden;
    margin-bottom: 10px;
    .table-wrapper {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
  .flex-column {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
  }
  &.hasLeft {
    display: flex;
    .left_path {
      width: 260px;
      overflow-y: auto;
      padding: 10px;
      background-color: #ffffff;
      margin-right: 10px;
      position: relative;
    }
  }
  &.child {
    .filter,
    .content {
      padding: 0;
    }
  }
  .pagination {
    padding: 10px 16px;
    display: flex;
    justify-content: right;
    align-items: center;
    background: #ffffff;
    flex-shrink: 0;
  }
}
</style>
